<template>
  <el-container class="container">
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-active="$route.path" router v-for="(item, Index) in menuItems" :key="`menu-${Index}`">
          <el-submenu index="1">
            <template slot="title">{{ item.title }}</template>
            <el-menu-item
              v-for="(subItem, subIndex) in item.items"
              :key="`menu-${Index}-${subIndex}`"
              :index="subItem.path"
              >{{ subItem.title }}</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component
export default class Home extends Vue {
  menuItems = [
    {
      title: "基本管理",
      items: [
        {
          title: "分类列表",
          path: "/categories/list",
        },
        {
          title: "职位列表",
          path: "/jobs/list",
        },
      ],
    },
  ];
}
</script>
